<template>
    <div class="w-full h-52 bg-[var(--bannerBg)] mb-5 relative">
        <el-carousel :interval="3000" type="card" height="208px">
            <el-carousel-item v-for="item in bannerList" :key="item.targetId">
                <img loading="eager" class="object-cover rounded-lg" :src="item.imageUrl" alt=""
                    @click="clickImg(item)">
                <p class="w-fit absolute px-2 top-0 text-white text-sm rounded-tl-lg rounded-br-lg"
                    :style="`background-color:${item.titleColor}`">{{ item.typeTitle }}</p>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, getCurrentInstance } from "vue"
import type { songInfo } from "@renderer/store/modules/eveylSong/type"
const { ipcRenderer } = require('electron')
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const bannerList = ref<Array<bannerType>>([])
interface bannerType {
    imageUrl: string,
    targetId: number,
    titleColor: string,
    targetType: number,
    typeTitle: string,
    encodeId: string
}
onMounted(() => {
    if (bannerList.value.length == 0) {
        getBannerList()
    }
})
// 获取轮播图
const getBannerList = async () => {
    await ipcRenderer.invoke('getBanner').then((res: { banners: Array<bannerType> }) => {
        bannerList.value = res.banners
    })
}
// 获取歌曲详情
const getSongDetailInfo = async (ids: string) => {
    await ipcRenderer.invoke('getSongDetail', ids).then((res: songInfo) => {
        bus.emit('MusicInfo', res[0])
    })
}
// 点击轮播图
const clickImg = async (item: bannerType) => {
    console.log(item);

    switch (item.targetType) {
        case 1: getSongDetailInfo(JSON.stringify(item.targetId))
            break;
        case 1000: console.log("歌单");
            break;
        case 10: console.log("新碟首发");
            break;
        case 100: console.log("数字单曲");
            break;

    }
}
</script>
<style scoped lang='less'>
:deep(.el-carousel__indicators--horizontal) {
    position: relative;
    text-align: center;
}

:deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--playBg);
}

:deep(.el-carousel__container .el-icon) {
    color: #fff;
    font-size: 17px;
}
</style>